<template>
  <div class="upload-box">
    <el-upload
      class="upload-demo"
      action="https://jsonplaceholder.typicode.com/posts/"
      :disabled="disabled"
      :limit="limit"
      :on-exceed="handleExceed"
      :http-request="(file)=>{return uploadFn(file,'1')}"
      :on-change="(file,fileList)=>{return handleChangeFile(file,fileList)}"
      :on-remove="(file,fileList)=>{return handleRemoveFile(file,fileList)}"
      :on-preview="handlePreview"
      :file-list="fileList">
      <el-button size="mini" type="primary" v-if="!disabled ">点击上传</el-button>
      <div slot="tip" class="el-upload__tip"></div>
    </el-upload>
  </div>
</template>

<script>
  import request from '@/utils/request'
  export default {
    name: "FileUpload",
    fileUrl:'/file/upload',
    components: {},
    directives: {},
    filters: {},
    mixins: [],
    model: {
      prop: 'fileList',
      event: 'input'
    },
    props: {
      fileList: {
        type: Array,
        default: () => ([])
      },
      limit: {
        type: Number,
        default: () => (3)
      },
      disabled: {
        type: Boolean,
        default: () => (false)
      },

    },
    data() {
      return {

      }
    },
    computed: {

    },
    watch: {
      fileList: {
        handler(val) {
          for (let index = 0; index < this.fileList.length; index++) {
            this.fileList[index]['name'] = this.fileList[index].fileName;
          }
        },
        deep: true
      }
    },
    created() {
      for (let index = 0; index < this.fileList.length; index++) {
        this.fileList[index]['name'] = this.fileList[index].fileName;
      }
    },
    methods: {
      upFile(query) {
        return request({
          url: `/file/upload`,
          method: 'post',
          data: query
        })
      },
      downloadFn(query) {
        return request({
          url: `/file/download/${query}`,
          method: 'get',
        })
      },
      handleChangeFile(){
        console.log('this.files:',this.fileList);
      },

      uploadFn(e,field){  // 文件上传
        var _this = this
        const file = e.file;
        const form = new FormData();
        // 文件对象
        form.append("file", file);

        this.upFile(form).then(
          response => {
            if(response && response.code ===0){
              response.data['name'] = response.data.fileName
              this.fileList.push(response.data);
              this.$emit('handleUploadSuccess',this.fileList);
            }else{
              this.msgError(response.msg)
            }
          }
        );
      },
      handleExceed(files, fileList) {
        this.$message.warning(`最多选择${this.limit}个文件`);
      },
      handlePreview(file){
        const fileId = file.id
        const url = ` ${process.env.VUE_APP_BASE_API}/file/download/${fileId}`
        window.open(url,'_blank')
      },
      handleRemoveFile(file, fileList){
        this.$emit('input',fileList);
        this.$emit('change',fileList);
        this.$emit('handleFileRemove',fileList);
      },
    },
  }
</script>

<style scoped  lang="scss">
  ::v-deep.el-upload-list__item-name {
    color: #606266;
    display: block;
    margin-right: 40px;
    overflow: hidden;
    padding-left: 4px;
    text-overflow: ellipsis;
    transition: color .3s;
    white-space: nowrap;
  }
</style>
